<template lang="html">
  <section>
    <ul id="nav-icon1" class="nav-icon" @click="click($event)">
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="nav-icon2" class="nav-icon" @click="click($event)">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="nav-icon3" class="nav-icon" @click="click($event)">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="nav-icon4" class="nav-icon" @click="click($event)">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
</template>

<script>
export default {
  methods: {
    click (event) {
      let target = event.currentTarget
      let className = target.className.split(' ')
      if (className.indexOf('open') > -1) {
        className.splice(className.indexOf('open') ,1)
      } else {
        className.push('open')
      }
      target.className = className.join(' ')
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.nav-icon {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  transform: rotate(0deg);
  transition: .5s all ease-in-out;
  cursor: pointer;
  // common
  &#nav-icon1,
  &#nav-icon3,
  &#nav-icon4 {
    li {
      display: block;
      position: absolute;
      height: 9px;
      width: 100%;
      background: #d3531a;
      border-radius: 9px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s all ease-in-out;
    }
  }
  // #nav-icon1
  &#nav-icon1 {
    li:nth-child(1) {
      top: 0px;
    }
    li:nth-child(2) {
      top: 18px;
    }
    li:nth-child(3) {
      top: 36px;
    }
  }
  &#nav-icon1.open {
    li:nth-child(1) {
      top: 18px;
      transform: rotate(135deg)
    }
    li:nth-child(2) {
      opacity: 0;
      left: -60deg;
    }
    li:nth-child(3) {
      top: 18px;
      transform: rotate(-135deg);
    }
  }
  // nav-icon2
  &#nav-icon2 {
    li {
      display: block;
      position: absolute;
      height: 9px;
      width: 50%;
      background: #d3531a;
      opacity: 1;
      transform: rotate(0deg);
      transition: .25s all ease-in-out;
    }
    li:nth-child(even) {
      left: 50%;
      border-radius: 0 9px 9px 0;
    }
    li:nth-child(odd) {
      left: 0px;
      border-radius: 9px 0 0 9px;
    }
    li:nth-child(1),
    li:nth-child(2) {
      top: 0px;
    }
    li:nth-child(3),
    li:nth-child(4) {
      top: 18px;
    }
    li:nth-child(5),
    li:nth-child(6) {
      top: 36px;
    }
  }
  &#nav-icon2.open {
    li:nth-child(1),
    li:nth-child(6) {
      transform: rotate(45deg);
    }
    li:nth-child(2),
    li:nth-child(5) {
      transform: rotate(-45deg);
    }
    li:nth-child(1) {
      left: 5px;
      top: 7px;
    }
    li:nth-child(2) {
      left: calc(50% - 5px);
      top: 7px;
    }
    li:nth-child(3) {
      left: -50%;
      opacity: 0;
    }
    li:nth-child(4) {
      left: 100%;
      opacity: 0;
    }
    li:nth-child(5) {
      left: 5px;
      top: 29px;
    }
    li:nth-child(6) {
      left: calc(50% - 5px);
      top: 29px;
    }
  }
  // nav-icon3
  &#nav-icon3 {
    li:nth-child(1) {
      top: 0px;
    }
    li:nth-child(2),
    li:nth-child(3) {
      top: 18px;
    }
    li:nth-child(4) {
      top: 36px;
    }
  }
  &#nav-icon3.open {
    li:nth-child(1),
    li:nth-child(4) {
      top: 18px;
      width: 0%;
      left: 50%;
    }
    li:nth-child(2) {
      transform: rotate(45deg);
    }
    li:nth-child(3) {
      transform: rotate(-45deg);
    }
  }
  // #nav-icon4
  &#nav-icon4 {
    li:nth-child(1) {
      top: 0px;
      transform-origin: left center;
    }
    li:nth-child(2) {
      top: 18px;
      transform-origin: left center;
    }
    li:nth-child(3) {
      top: 36px;
      transform-origin: left center;
    }
  }
  &#nav-icon4.open {
    li:nth-child(1) {
      transform: rotate(45deg);
      top: -3px;
      left: 8px;
    }
    li:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    li:nth-child(3) {
      transform: rotate(-45deg);
      top: 39px;
      left: 8px;
    }
  }
}
</style>
